<template>
  <div>
    <div class="chart" ref="myChart">
    </div>
  </div>
</template>

<script>
import {getEducationStat} from "../api";

export default {
  name: 'LeftCenter',
  data () {
    return {
      education_stat: [],
      newArray: [{}, {}, {}, {}, {}]
    }
  },
  methods: {
    init () {
      const getChartDom = this.$refs.myChart
      const myChart = this.$echarts.init(getChartDom, 'dark')
      setTimeout(() => {
        window.onresize = myChart.resize;
      }, 1000)
      myChart.setOption({
        title: {
          text: '',
          top: 'auto',
          left: 'auto'
        },
        tooltip: {},
        backgroundColor: 'rgb(14, 26, 45)',
        axisPointer: {
          type: 'shadow'
        },
        series: [{
          name: '学习型',
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.education_stat
        }]
      });
    },
    getEducationS () {
      setInterval(() => {
        getEducationStat().then(res => {
          const data = res.data.data
          data.education_stat.map((item, index) => {
            this.newArray[index].name = item.education_name
            this.newArray[index].value = item.cnt
          })
          this.education_stat = this.newArray
        })
        this.init()
      }, 4000)
    }
  },
  mounted () {
    this.init()
    this.getEducationS()
  },
  watch: {
    education_stat: function () {
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/var_";

.chart {
  width: $left_chart;
  height: $center_height;
  position: relative;
  padding: 10px;
  box-sizing: border-box;

  /*<!--.txt {-->*/
  /*<!--  position: absolute;-->*/
  /*<!--  left: 50%;-->*/
  /*<!--  top: 50%;-->*/
  /*<!--  transform: translate(-50%, -50%);-->*/
  /*<!--  width: 30px;-->*/
  /*<!--  height: 30px;-->*/
  /*<!--  background: red;-->*/
  /*<!--  z-index: 10;-->*/
  /*<!--}-->*/
}
</style>
